import React from 'react'

const Decorator = ({css, isFocused, path, draging, resizing, edited}) => {
    const eventName = BROWSER.isEdge ? 'pointerdown' : 'mousedown'

    const handle = fn => dom => $(dom).off(eventName).on(eventName, fn)

    const resize = dot => ev => {
        edited()
        resizing(ev, dot)
        ev.stopPropagation()
    }

    const drag = ev => {
        draging(ev)
        ev.stopPropagation()
    }

    return (
        <div
            className={`decorator ${isFocused ? 'active' : ''}`}
            ref={handle(drag)}
        >
            <div className="dot dot-1" ref={handle(resize(1))}></div>
            <div className="dot dot-2" ref={handle(resize(2))}></div>
            <div className="dot dot-3" ref={handle(resize(3))}></div>
            <div className="dot dot-4" ref={handle(resize(4))}></div>
            <div className="dot dot-5" ref={handle(resize(5))}></div>
            <div className="dot dot-6" ref={handle(resize(6))}></div>
            <div className="dot dot-7" ref={handle(resize(7))}></div>
            <div className="dot dot-8" ref={handle(resize(8))}></div>
        </div>
    )
}

export default Decorator